<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - cubemap demo</title>

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">
  <link rel="stylesheet" href="../dist/plugins/markers.css">

  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #photosphere {
      width: 100%;
      height: 100%;
    }

    .psv-button.custom-button {
      font-size: 22px;
      line-height: 20px;
    }
  </style>
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/promise-polyfill/dist/polyfill.js"></script>
<script src="../node_modules/uevent/browser.js"></script>
<script src="../node_modules/nosleep.js/dist/NoSleep.js"></script>
<script src="../node_modules/three/examples/js/controls/DeviceOrientationControls.js"></script>
<script src="../node_modules/three/examples/js/effects/StereoEffect.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>
<script src="../dist/plugins/markers.js"></script>

<script>
  var panos = [
    {
      url : {
        left  : 'suntemple-cubemap/left.jpg',
        front : 'suntemple-cubemap/front.jpg',
        right : 'suntemple-cubemap/right.jpg',
        back  : 'suntemple-cubemap/back.jpg',
        top   : 'suntemple-cubemap/top.jpg',
        bottom: 'suntemple-cubemap/bottom.jpg'
      },
      desc: 'Sun Temple (Unreal 4)'
    },
    {
      url : [
        'test-cubemap/1.png',
        'test-cubemap/2.png',
        'test-cubemap/3.png',
        'test-cubemap/4.png',
        'test-cubemap/5.png',
        'test-cubemap/6.png'
      ],
      desc: 'Test cubemap'
    }
  ];

  var PSV = new PhotoSphereViewer.Viewer({
    container : 'photosphere',
    panorama  : panos[0].url,
    caption   : panos[0].desc,
    loadingImg: 'assets/photosphere-logo.gif',
    navbar    : [
      'autorotate', 'zoom', 'download', 'markers', 'markersList',
      {
        title    : 'Change image',
        className: 'custom-button',
        content  : '🔄',
        onClick  : (function () {
          var i = 0;

          return function () {
            i = 1 - i;
            markers.clearMarkers();

            PSV.setPanorama(panos[i].url, { zoom: 50 })
              .then(function () {
                PSV.navbar.setCaption(panos[i].desc);
              }, function () {});
          };
        }()),
      },
      {
        title    : 'Random position',
        className: 'custom-button',
        content  : '🔀',
        onClick  : function () {
          PSV.animate({
            longitude: (Math.random() - 0.5) * 2 * Math.PI,
            latitude : (Math.random() - 0.5) * 3 / 4 * Math.PI,
            zoom     : Math.random() * 60 + 20,
            speed    : 1500,
          });
        },
      },
      'caption', 'fullscreen',
    ],
    plugins   : [
      [PhotoSphereViewer.MarkersPlugin, {
        markers: (function () {
          var a = [];
          for (var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
            for (var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
              a.push({
                id       : '#' + a.length,
                tooltip  : '#' + a.length,
                latitude : j,
                longitude: i,
                image    : 'assets/pin-red.png',
                width    : 32,
                height   : 32,
                anchor   : 'bottom center',
                data     : {
                  deletable: true,
                },
              });
            }
          }

          a.push({
            id        : 'statue',
            tooltip   : 'Angel',
            svgStyle  : {
              fill: 'rgba(255, 0, 111, 0.26)',
            },
            polygonRad: [5.4196, 0.6801, 5.4644, 0.7610, 5.5004, 0.9194, 5.6522, 0.9363, 5.6923, 0.9757, 5.8132, 0.9662, 5.8625, 0.9315, 5.8905, 0.9991, 6.0215, 1.0558, 0.0822, 0.9023, 6.2390, 0.8732, 6.0377, 0.8648, 5.8348, 0.8780, 5.7862, 0.8678, 5.8175, 0.8614, 5.8431, 0.8128, 5.8354, 0.7028, 5.8620, 0.6204, 5.8815, 0.4776, 5.9339, 0.3234, 5.7591, 0.3510, 5.5885, 0.3273, 5.6381, 0.4327, 5.6353, 0.5043, 5.5959, 0.6228, 5.5877, 0.7108, 5.5952, 0.7519, 5.5775, 0.7502, 5.5021, 0.7012],
          });

          return a;
        }())
      }]
    ]
  });

  var markers = PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);
</script>
</body>
</html>
